import styled from 'styled-components';
import loginlogo from '@/assets/img/loginlogo.png';
const Login = styled.div`
  width: 100vw;
  height: 100vh;
  position: relative;
  input:-internal-autofill-selected {
    background-color: transparent !important;
  }
  .nav {
    position: absolute;
  }
  .test {
    color: skyblue;
  }
  .bgc {
    background: url(${loginlogo}) no-repeat;
    background-position-y: 65%;
    background-position-x: 100%;
    background-size: 140%;
    width: 100%;
    height: 100%;
  }
  .loginer {
    width: 31.25rem;
    height: 41.5em;
    background-color: rgba(44, 100, 175, 0.5);
    border-radius: 5%;
    position: absolute;
    right: 10%;
    bottom: 30%;

    .title {
      color: whitesmoke;
      width: 80%;
      height: 5.4rem;
      font-size: 2rem;
      margin: 8% 12% -2% 12%;
      text-align: center;
    }
    .title-1 {
      margin-right: 12%;
      a {
        color: whitesmoke;
      }
      a:hover {
        color: blue;
      }
    }
    .id-msx {
      width: 23rem;
      height: 16rem;
      margin-left: 14%;
    }
    .morelogin {
      width: 25rem;

      height: 1.5rem;
      margin-left: 9%;
      margin-top: -12%;
      font-size: 1rem;
      vertical-align: middle;
      .morelogin-check {
        width: 12rem;
        float: left;
        margin-left: 6%;
        color: whitesmoke;
        a {
          color: whitesmoke;
        }
      }
      .morelogin-forget {
        width: 5rem;
        float: right;
        margin-right: 5%;
        color: whitesmoke;
        a {
          color: whitesmoke;
        }
        a:hover {
          color: blue;
        }
      }
    }
    .button {
      margin-top: 7%;
      margin-bottom: 10%;
      width: 27rem;
      height: 4rem;
      display: inline-block;
      background-color: whitesmoke;
      margin-left: 7%;
      font-size: 1.5rem;
    }
    .morefunction {
      width: 27rem;
      height: 2rem;
      margin-left: 7%;
      color: whitesmoke;
      font-size: 1.2rem;
      .regist-button {
        float: right;
        width: 40%;
        color: #fff,
        text-align: center;
      }
    }
  }
`;

export default Login;
